<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>2.v-bind的简写</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            Vue的语法，总体上分为两种，分别是：插值语法、指令语法
                插值语法（简单）：专门用于操作【标签体】内容
                指令语法（复杂）：可以用于操作：标签属性、标签体、绑定事件.........
         -->
        <!-- 准备好一个容器-->
        <div id="demo">
            <h1>插值语法</h1>
            <h2>{{school}}欢迎你！</h2>
            <hr>
            <h1>指令语法</h1>
            <a 
                :href="url" 
                a="url" 
                :b="url" 
                c="1+1" 
                :d="1+1"
                e="url.toUpperCase()"
                :f="url.toUpperCase()"
            >点我去学习</a>
        </div>

        <script type="text/javascript">
            //阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip = false 
            new Vue({
                el:'#demo',
                data:{
                    school:'尚硅谷',
                    url:'http://www.atguigu.com'
                }
            })
        </script>
    </body>
</html>